<template>
	<view class="x-main-content">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#000" leftIconSize="42rpx" autoBack placeholder
			title="分享邀请">
		</u-navbar>
		<view class="bg-title">
		</view>
		<view style="padding: 0 40rpx;">
			<view class="page">
				<view class="qrcode-box">
					<view class="qrcode">
						<u-qrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake"
							@complete="complete($event)"></u-qrcode>
					</view>
					<text class="msg">保存二维码分享用户!</text>
					<button class="save" type="primary" size="mini" @click="save">保存</button>
				</view>

			</view>
			<view class="invite">
				<view class="invite-title">
					邀请记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: 'http://www.peiyiyiliao.com/',
				size: 200
			};
		},
		methods: {
			complete(e) {
				if (e.success) {
					console.log('生成成功');
				} else {
					console.log('生成失败');
				}
			},
			remake() {
				const ref = this.$refs['qr'];
				ref.remake();
			},
			save() {
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				const ref = this.$refs['qr'];
				ref.save({
					success: res => {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: '用户取消'
						});
					}
				});

			}
		}
	};
</script>

<style scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.qrcode-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
	}

	.qrcode {
		padding: 32rpx;
		background-color: #ffffff;
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
		overflow: hidden;
	}

	.msg {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #9a9b9c;
	}

	.save {
		margin-top: 20rpx;
		background-color: #386fff;
		border-radius: 30rpx;
	}

	.invite {
		margin-top: 40rpx;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 30rpx;
		font-size: 32rpx;
	}
</style>